<template>
<div class="footer">
  <mtTabbar v-model="selected">
    <mtTabItem :id="item.path" v-for="(item, index) in routes" :key ="index"><img slot="icon" :src="item.url">{{item.name}}</mtTabItem>
</mtTabbar>
</div>
</template>

<script>
import { routes } from '@/router'
import { Tabbar, TabItem } from 'mint-ui'
export default {
  data () {
    return {
      selected: routes[0].path,
      routes: []
    }
  },
  created () {
    routes.forEach((element, index) => {
      if (index < 4) {
        element.url = `/static/icon/icon${index}.png`
      }
    })
    this.routes = routes.slice(0, 4)
  },
  watch: {
    selected (val, oval) {
      this.$router.push({path: val})
    },
    $route (to, from) {
      if (/search/.test(to.path)) {
        this.selected = routes[2].path
      } else if (/order/.test(to.path)) {
        this.selected = routes[1].path
      } else if (/profile/.test(to.path)) {
        this.selected = routes[3].path
      }
    }

  },
  components: {
    mtTabbar: Tabbar,
    mtTabItem: TabItem
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
</style>
